<!DOCTYPE html>
<html>
<head>
    <title>舆情监控系统 - 登录</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <div class="login-container">
            <div class="login-box">
                <div class="login-header">
                    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
                    <h1>舆情监控系统</h1>
                </div>
                <div class="login-form">
                    <el-form ref="loginForm" :model="loginForm" :rules="rules">
                        <el-form-item prop="username">
                            <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" placeholder="密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleLogin" :loading="loading" class="login-button">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    loginForm: {
                        username: '',
                        password: ''
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' }
                        ]
                    },
                    loading: false
                }
            },
            methods: {
                async handleLogin() {
                    try {
                        const valid = await this.$refs.loginForm.validate();
                        if (!valid) return;

                        this.loading = true;
                        const response = await fetch('/api/auth/login', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(this.loginForm)
                        });

                        const data = await response.json();
                        
                        if (response.ok) {
                            this.$message.success('登录成功');
                            window.location.href = "{{ url_for('views.dashboard') }}";
                        } else {
                            this.$message.error(data.error || '登录失败');
                        }
                    } catch (error) {
                        this.$message.error('登录失败，请重试');
                    } finally {
                        this.loading = false;
                    }
                }
            }
        });
    </script>

    <style>
    .login-container {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f5f7fa;
    }

    .login-box {
        width: 400px;
        padding: 40px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }

    .login-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .login-header img {
        height: 60px;
        margin-bottom: 20px;
    }

    .login-header h1 {
        font-size: 24px;
        color: #303133;
        margin: 0;
    }

    .login-button {
        width: 100%;
    }
    </style>
</body>
</html> 